<template>
  <div class="like-main">
    <Title>猜你喜欢</Title>
    <ul>
      <li v-for="item in likeList" :key="item.id" @click="goDetail(item)">
        <img v-lazy="item.imgUrl" alt="" />
        <div class="like-txt">
          <span>{{ item.name }}</span>
          <h6>￥{{ item.price }}</h6>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Like",
  props: {
    likeList: Array,
  },
  methods: {
    goDetail(obj) {
      this.$router.push({
        name: "detail",
        query:{
          id: obj.id
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.like-main {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.1333rem;
    justify-content: space-between;

    li {
      width: calc(50% - 0.0667rem);
      height: 45%;

      img {
        width: 100%;
      }

      .like-txt {
        display: flex;
        flex-direction: column;

        span {
          font-size: 0.3733rem;
          color: rgba(82, 80, 80, 0.895);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        h6 {
          color: rgb(255, 0, 0);
        }
      }
    }
  }
}
</style>
